<template>
  <div class="details">
    <div
      v-if="isLoading"
      v-loading="isLoading"
      element-loading-text="Loading..."
      class="loading"
    ></div>
    <template v-else-if="loadError">
      <el-result
        icon="error"
        title="未找到指定页面"
        sub-title="请返回草稿箱列表"
      >
        <template #extra>
          <el-button type="primary" @click="handleBack">返回</el-button>
          <el-button v-if="route.query?.id" @click="handleLoad">
            重新加载
          </el-button>
        </template>
      </el-result>
    </template>
    <template v-else>
      <component :is="loadComponents[sourceData.type]" />
    </template>
  </div>
</template>

<script lang="ts" setup>
  import { resDetailsProps, detailsInfoProps } from '../interface'
  import { getDraftBoxGetDetails } from '@/api/project/drafts'
  import { useCloseTabNavigate } from '@/utils/useCloseTabNavigate'

  const { closeTabNavigate } = useCloseTabNavigate()

  const route = useRoute()
  // console.log('route', route)
  // 查询的数据
  const sourceData = reactive<Partial<detailsInfoProps>>({})

  // 加载状态
  const isLoading = ref<boolean>(false)
  const componentLoaded = ref<boolean>(false)
  const loadError = ref<boolean>(false)
  const handleSearch = async (id: string) => {
    isLoading.value = true
    loadError.value = false
    try {
      const res: resDetailsProps = await getDraftBoxGetDetails({
        id,
      })
      if (res && res.data) {
        sourceData.type = res.data?.type

        // 检查组件是否能加载成功
        if (loadComponents[sourceData.type]) {
          componentLoaded.value = true
        } else {
          componentLoaded.value = false
          loadError.value = true
        }
      } else {
        Object.assign(sourceData, { type: undefined })
        componentLoaded.value = false
        loadError.value = true
      }
    } catch (e) {
      console.error('获取草稿明细失败:', e)
      Object.assign(sourceData, { type: undefined })
      componentLoaded.value = false
      loadError.value = true
    } finally {
      isLoading.value = false
    }
  }

  watch(
    () => route.query?.id,
    (newId: string) => {
      if (newId) {
        handleSearch(newId)
      } else {
        // 当 newId 为空时，设置 loadError 为 true
        loadError.value = true
      }
    },
    { immediate: true }
  )
  // 返回
  const handleBack = () => {
    closeTabNavigate({ name: 'Drafts_Index' })
  }
  // 重新加载
  const handleLoad = () => {
    if (route.query?.id) {
      handleSearch(route.query.id as string)
    }
  }

  // 加载的组件
  const loadComponents = {
    PROBLEM: defineAsyncComponent(
      () => import('@/views/researchProblems/report/index.vue')
    ),
    YEAR_BUDGET: defineAsyncComponent(
      () => import('@/views/researchFunds/annualBudget/report/index.vue')
    ),
    FIELD_EXPERIMENT_FUNDING: defineAsyncComponent(
      () => import('@/views/researchFunds/fieldTest/report/index.vue')
    ),
    TOPIC: defineAsyncComponent(
      () => import('@/views/project/approval/suggest/submit.vue')
    ),
    TECH_JOBS_FUNDING: defineAsyncComponent(
      () => import('@/views/researchFunds/work/report/index.vue')
    ),
    FUNDING_APPROPRIATION: defineAsyncComponent(
      () => import('@/views/researchFunds/allocationForm/report/index.vue')
    ),
    FUNDING_NEXT_YEAR: defineAsyncComponent(
      () => import('@/views/researchFunds/useApplication/report/index.vue')
    ),
    FUNDING_ADJUST: defineAsyncComponent(
      () => import('@/views/researchFunds/adjApplication/report/index.vue')
    ),
    PATENT: defineAsyncComponent(
      () => import('@/views/property/patent/components/newPatentDetails.vue')
    ),
    SOFTWARE: defineAsyncComponent(
      () => import('@/views/property/softWorks/components/softWorksDetails.vue')
    ),
    TECH_SECRET: defineAsyncComponent(
      () =>
        import(
          '@/views/property/technicalSecrets/components/technicalSecretsDetails.vue'
        )
    ),
    REVIEW_EXPERT: defineAsyncComponent(
      () => import('@/views/reviewExperts/components/reviewDetails.vue')
    ),
    TECH_PRAISE: defineAsyncComponent(
      () => import('@/views/achievementAward/components/awardDetails.vue')
    ),
    CREATIVITY_PRODUCT_REPORT: defineAsyncComponent(
      () => import('@/views/innovate/components/innovateDetails.vue')
    ),
    OPENING: defineAsyncComponent(
      () => import('@/views/project/approval/report/submit.vue')
    ),
    PROJECT_PLAN: defineAsyncComponent(
      () => import('@/views/project/approval/plan/submit.vue')
    ),
    PROJECT_PLAN_TASK: defineAsyncComponent(
      () => import('@/views/project/approval/task/submit.vue')
    ),
    PROJECT_CHANGE: defineAsyncComponent(
      () => import('@/views/project/course/alter/submit.vue')
    ),
    KEY_PROJECT_PROGRESS: defineAsyncComponent(
      () => import('@/views/project/course/progress/submit.vue')
    ),
    KEY_PROJECT_SCORE: defineAsyncComponent(
      () => import('@/views/project/course/score/submit.vue')
    ),
    PROJECT_ACCEPT: defineAsyncComponent(
      () => import('@/views/project/accept/task-in/submit.vue')
    ),
    PROJECT_ACCEPT_UNPLAN: defineAsyncComponent(
      () => import('@/views/project/accept/task-out/submit.vue')
    ),
    PROJECT_ACCEPT_RESULT: defineAsyncComponent(
      () => import('@/views/project/accept/task-in/upload.vue')
    ),
    PROJECT_ACCEPT_UNPLAN_RESULT: defineAsyncComponent(
      () => import('@/views/project/accept/task-out/upload.vue')
    ),
  }
</script>

<style lang="scss" scoped>
  .details {
    box-sizing: border-box;
    // height: 100vh;
    padding: 20px;
    .loading {
      height: 100%;
    }
  }
</style>
